<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="daily-english" field="state,text,cover,content,create_time">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
		<view class="item-card"  v-for="(item, index) in data" :key="index">
			<image class="cover" :src="item.cover"></image>
			<view class="content">
				<view class="title">
					{{item.content.split('\n')[0]}}
				</view>
				<view class="desc">
					{{item.content.split('\n')[1]}}
				</view>
				<view class="date">
					{{getDate(item.create_time)}}
				</view>
			</view>
			<view class="action">
				<text  @click="handleUpdate(item._id)">修改</text>
				<text @click="handleItemClick(item._id)">查看</text>
			</view>
		</view>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
	computed: {
		getDate() {
			return (nS)=> new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/,' ');
		}
	},
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
	  handleUpdate(id) {
	    // 打开修改页面
	    uni.navigateTo({
	      url: './edit?id=' + id,
	      events: {
	        // 监听修改页面成功修改数据后, 刷新当前页面数据
	        refreshData: () => {
	          this.$refs.udb.loadData({
	            clear: true
	          })
	        }
	      }
	    })
	  },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
	.item-card{
		padding:30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.cover{
			width:100rpx;
			height:100rpx;
			
		}
		.content{
			margin:0 20px;
			flex:1;
			display: flex;
			flex-direction: column;
			
		}
		.action{
			text{
				color:$uni-color-primary;
				margin-right:10rpx;
				cursor: pointer;
			}
		}
		
	}
</style>
